<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./vue.2.6.14.js"></script>
  <!-- 引入样式 -->
  <link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.8/theme-chalk/index.min.css" rel="stylesheet">
  <!-- 引入组件库 -->
  <script src="./element.js"></script>
</head>
<body>


<div id="app"></div>

<textarea style="width: 100%" id="html"  rows="10"></textarea>

<textarea style="width: 100%" id="js"  rows="20"></textarea>
</body>
<script src="form.umd.js"></script>
<script id="script" type="module">
let tpl = `<div>
  <z-form-provider :config="formConfig">
    <z-single-field  v-for="(item, index) in datas"
    v-model="item.__config__.defaultValue"
    :key="index" :config="item"></z-single-field>
  </z-form-provider>
  <el-button>测试</el-button>
</div>
`

import './initSim.js'
import  "./composition-api.js";
globalThis.vueCompositionAPI = VueCompositionAPI

form.installFormSingle(Vue)

// console.log(form)
Vue.config.devtool = true
new Vue({
  template: tpl,
  computed: {
    models() {
      return this.datas.map(v => v.__config__.defaultValue)
    }
  },
  data: function() {
    return {
      formConfig: {
        request: {
          async ['fetch']({apiConfig, type, ctx} = {}) {
            console.log('fetch', apiConfig, type, ctx)



            if (type === 'options') {
              // let {config = {}, ui, url} = apiConfig
              // console.log(ui)



              // if (reqOption.url.indexOf('zy-boot') < 0) {
              //   reqOption.url = '/api' + apiConfig.url
              // }
              return [
                {
                  label: '撒大声地所',
                  value: '1111'
                }
              ]

            }
            return []
          },
        }
      },
      datas: [
        {
          // 组件的自定义配置
          __config__: {
            label: '单行文本',
            labelWidth: null,
            showLabel: true,
            changeTag: true,
            tag: 'CusInput',
            tagIcon: 'input',
            defaultValue: '1111',
            required: true,
            layout: 'colFormItem',
            span: 24,
            document: 'https://element.eleme.cn/#/zh-CN/component/input',
            // 正则校验规则
            regList: []
          },
          // 组件的插槽属性
          __slot__: {
            prepend: '',
            append: ''
          },
          __value__: "",
          // 其余的为可直接写在组件标签上的属性
          placeholder: '请输入',
          style: {
            width: '100%'
          },
          clearable: true,
          'prefix-icon': '',
          'suffix-icon': '',
          maxlength: null,
          'show-word-limit': false,
          readonly: false,
          disabled: false
        },
        {
          // 组件的自定义配置
          __config__: {
            label: 'select',
            labelWidth: null,
            showLabel: true,
            changeTag: true,
            tag: 'CusSelect',
            tagIcon: 'select',
            defaultValue: undefined,
            required: true,
            layout: 'colFormItem',
            optionsUrl: 'http://192.168.1.67:7001/dicts',
            span: 24,
            document: 'https://element.eleme.cn/#/zh-CN/component/input',
            // 正则校验规则
            regList: []
          },
          // 组件的插槽属性
          __slot__: {
            prepend: '',
            append: ''
          },
          __value__: "",
          // 其余的为可直接写在组件标签上的属性
          placeholder: '请输入',
          style: {
            width: '100%'
          },
          clearable: true,
          'prefix-icon': '',
          'suffix-icon': '',
          maxlength: null,
          'show-word-limit': false,
          readonly: false,
          disabled: false
        },
      ]
    }
  },
  mounted() {
    document.getElementById('html').innerHTML = tpl
    document.getElementById('js').innerHTML = `


import 'pkg-exms/lib/initSim.js'
import * as form from 'pkg-exms/lib/form.common.js'
import VueCompositionApi, * as Lib from "@vue/composition-api";
globalThis.vueCompositionAPI = Lib;

Vue.use(VueCompositionApi);
form.installFormSingle(Vue)

data() {
return {
      formConfig: {
        request: {
          async ['fetch']({apiConfig, type, ctx} = {}) {
            console.log('fetch', apiConfig, type, ctx)



            if (type === 'options') {
              // let {config = {}, ui, url} = apiConfig
              // console.log(ui)



              // if (reqOption.url.indexOf('zy-boot') < 0) {
              //   reqOption.url = '/api' + apiConfig.url
              // }


            }
            return []
          },
        }
      },
}
}

    `
  },
  methods: {
    onChange(config, v) {
      console.log('onChange', config, v)
      config.defaultValue = v
    }
  }
}).$mount('#app')
</script>
</html>
